---
import BaseHead from '../../components/Head/BaseHead.astro';
import Nav from '../../components/Nav.astro';
import HomeHeader from '../../components/HomeHeader.astro';
import Card from '../../components/Card.astro';
import Footer from '../../components/Footer/Footer.astro'
import Paginator from '../../components/Paginator.astro'

const title = '觅心阁';
const description = '在喧嚣中觅得一方净土，内心的寂静绽放出美丽的花朵。';
const seoDescription = '123';


const response = await fetch('http://localhost:9901/api/getArticles');
const data = await response.json();

const sortedPosts = data.sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf());
---

<html lang="en">

<head>
  <BaseHead title={title} description={seoDescription} />
</head>

<body class="bg-white text-black font-body leading-normal personality-casual">
  <Nav />

  <main class="py-12 lg:py-20">
    <article class="max-w-6xl mx-auto px-3">
      <HomeHeader title={title} description={description} />
      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-8" data-test="articles-section">
        {sortedPosts.map(p => <div class="col-span-1">
          <Card post={p} />
        </div>)}
      </section>
    </article>
  </main>

  <section class="flex space-x-8 justify-center text-xl pt-8 font-bold">
    <a href="/posts" class="mr-8" data-test="see-all-link">
      See All<span class="squiggle">&rarr;</span>
    </a>
  </section>

  <Footer />
</body>

</html>



